<template>
    <view :style="objColor">
        <customer></customer>
        <!-- mine/pages/refund/refund.wxml -->
        <view class="refundBox">
            <view class="refundMoney">
                <view class="priceList">
                    <view @tap="checkTab" :data-index="0">
                        <view class="money">{{ refundAmountInfo.refundableAmount }}</view>
                        <view class="describe">可退款(元)</view>
                    </view>
                    <view class="line"><view></view></view>
                    <view @tap="checkTab" :data-index="1">
                        <view class="money">{{ refundAmountInfo.nonRefundableAmount }}</view>
                        <view class="describe">不可退款(元)</view>
                    </view>
                </view>

                <view class="fot_btn">
                    <view class="btn" @tap="showExplainFun" :data-flag="true">申请退款</view>
                    <view class="btn1" @tap="goRefundRecord">退款记录</view>
                </view>
            </view>
            <view class="operation">
                <!--<view class="tabList">-->
                <!--<view :class="'tab ' + (tabIndex == index ? 'tab_sel' : '')" @tap="checkTab" :data-index="index" v-for="(item, index) in tabList" :key="index">-->
                <!--{{ item }}-->
                <!--<image class="img" v-if="tabIndex == index" src="https://oos-cn.ctyunapi.cn/front-end/static/static/title_bg2.png"></image>-->
                <!--</view>-->
                <!--</view>-->
                <view class="tabs">
                    <text>{{tabList[tabIndex]}}</text><text>余额</text>
                </view>
                <view class="record" v-if="tabIndex == 0">
                    <view class="record_item" v-if="rechargeLists.length > 0" v-for="(item, index) in rechargeLists" :key="index">
                        <view class="itemDisplay">
                            <view class="itemTitle">
                                <view class="name">充值{{ item.balance / 100 }}元</view>
                            </view>
                            <view class="changeAmount2">可退{{ item.chargeMoney / 100 }}</view>
                        </view>

                        <view class="itemDisplay">
                            <view class="time">{{ item.time }}</view>
                        </view>
                    </view>
                    <view v-if="rechargeLists.length == 0&&loading">
                        <Upgrading text="暂无可退金额"></Upgrading>
                    </view>
                    <view class="noList" v-if="LoadingComplete">全部加载完成</view>
                </view>
                <view class="record" v-if="tabIndex == 1">
                    <view class="record_item" v-if="rechargeLists.length > 0 && item.id" v-for="(item, index) in rechargeLists" :key="index">
                        <view class="itemDisplay">
                            <view class="itemTitle">
                                <view class="name">充值{{ item.balance / 100 }}元</view>
                            </view>
                            <view class="changeAmount1">{{ item.chargeMoney / 100 }}</view>
                        </view>

                        <view class="itemDisplay">
                            <view class="time">{{ item.time || '--' }}</view>
                            <view class="time">{{ item.offerRuleName ? item.offerRuleName : '暂无' }}</view>
                        </view>
                    </view>
                    <view v-if="rechargeLists.length == 0&&loading">
                        <Upgrading text="暂无不可退金额"></Upgrading>
                    </view>
                    <view class="noList" v-if="LoadingComplete">全部加载完成</view>
                </view>
            </view>
        </view>
        <view class="doubt_view">
            <view class="doubt">如有疑问请查看<text @tap="showExplainFun">退款说明</text>或直接<text @tap="showCustomerFun">联系客服</text></view>
        </view>
        <!-- 未支付订单 -->
        <u-popup custom-style="padding:32rpx 32rpx 130rpx 32rpx;width:82%;border-radius: 20px;" mode="center" :show="showUnpaidOrder" @close="onCloseUnpaidOrder">
            <view class="explain1">
                <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/pay.png"></image>
                <view class="payNum">您有{{ unpaidOrderNum }}笔待支付订单</view>
                <view class="payTit">请完成支付后再发起申请</view>
                <view class="pupBtn" @tap="goPayOrder">去支付</view>
            </view>
        </u-popup>
        <!-- 您有车辆正在充电中 -->
        <u-popup custom-style="padding:32rpx 32rpx 130rpx 32rpx;width:82%;border-radius: 20px;" mode="center" :show="showCharging" @close="onCloseCharging">
            <view class="explain1">
                <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/Charging.png"></image>
                <view class="payNum" style="font-weight:800">您有车辆正在充电中</view>
                <view class="payTit">请完成充电后再发起申请</view>
                <view class="pupBtn" @tap="onCloseCharging">我知道了</view>
            </view>
        </u-popup>
        <!-- 退款说明 -->
        <u-popup :show="showExplain" :round="20" mode="center" @close="onCloseExplain">
            <view class="explain" style="padding:32rpx 32rpx 130rpx 32rpx;width:702rpx;box-sizing: border-box;padding-bottom: 135rpx;">
                <view class="title">退款说明</view>
                <rich-text :nodes="refundInstructions"></rich-text>
                <!-- <view class="txt">1.个人账户充值余额才可申请退款；</view>
						<view class="txt">2.冻结金额不可退款，解冻后可退；</view>
							<view class="txt">3.已使用优惠券的整单充值金额不可退款；</view>
							  <view class="txt">4.已使用奖励金的整单充值金额不可退款；</view>
								<view class="txt">5.参加活动获得的赠送金额、奖励金额不可退款；</view>
					<view class="txt">6.退款申请成功后，将原路退还。</view> -->
                <view class="pupBtn" @tap="onCloseExplain">确认</view>
            </view>
        </u-popup>
        <!-- 联系客服 -->
        <uni-popup  ref="alertDialog" type="dialog">
            <!-- <view style="padding:80rpx 60rpx 0 60rpx;width:680rpx;box-sizing: border-box;">
                <view class="info">联系客服：{{ refundAmountInfo.customerTelephone }}</view>
                <view class="info">工作时间：{{ refundAmountInfo.customerServiceTime }}</view>
                <view class="customerBtn">
                    <view class="btn1" @tap="onCloseCustomer">取消</view>
                    <view class="btn2" @tap="call">呼叫</view>
                </view>
            </view> -->
            <uni-popup-dialog  type="info" cancelText="取消" confirmText="呼叫" title="温馨提示"  @confirm="call"
                @close="onCloseCustomer">
                <view>
                    <view class="infoPopup"><view class="infoTitle">联系客服：</view><text class="infoValue">{{ refundAmountInfo.customerTelephone }}</text></view>
                    <view class="infoPopup"><view class="infoTitle">工作时间：</view>{{ refundAmountInfo.customerServiceTime }}</view>
                </view>
                <!-- <view class="customerBtn">
                    <view class="btn1" @tap="onCloseCustomer">取消</view>
                    <view class="btn2" @tap="call">呼叫</view>
                </view> -->
            </uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
	'use strict';
	import Upgrading from '../../../components/upgrading/upgrading';

	// exports.__esModule = true; // mine/pages/refund/refund.ts

	var https_1 = require('./../../../api/https.js');
	export default {
		components: {
			Upgrading
		},
		data() {
			return {
                loading:false,
				tabIndex: 0,
				tabList: ['可退金额', '不可退金额'],
				showExplain: false,
				page: 1,
				pages: 1,
				unpaidOrderNum: 0,
				chargingOrderList: [],
				showUnpaidOrder: false,
				showCharging: false,
				pageSize: 10,
				LoadingComplete: false,
				rechargeLists: [],
				isFlag:false,
				refundAmountInfo: {
					refundableAmount: '',
					nonRefundableAmount: '',
					refundInstruction: '',
					customerTelephone: '',
					customerServiceTime: ''
				},
                refundInstructions:''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function () {},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function () {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function () {
			
            this.getRefundInstructions() // 退款说明

			this.getRefundList(0, 'replace'); //退款列表
            // 延迟执行
            setTimeout(()=>{
                this.getRefundAmount(); //查询会员可退及不可退金额
            },2000)
			this.getMyNotPayBillNumber();
			this.chargeInfos();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function () {
			//调用刷新时将执行的方法
			this.page= 1,
				this.pages=1,
				this.rechargeLists= []
			this.getRefundList(this.tabIndex, 'replace');
		},
		//  * 页面上拉触底事件的处理函数
		onReachBottom: function () {
			var that = this;
			var page = that.page + 1;

			if (that.page < that.pages) {
				that.page= page
				this.getRefundList(that.tabIndex, '');
			}
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function () {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function () {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function () {},
		methods: {
			getRefundAmount: function () {
				var that = this;
				https_1.refundAmount().then(function (res) {
					if (res.code == 0) {
						var data = res.data;
						data.refundableAmount = (data.refundableAmount / 100).toFixed(2);
						data.nonRefundableAmount = (data.nonRefundableAmount / 100).toFixed(2);
						that.refundAmountInfo= data
                        
					}
				});
			},
            // 退款说明
            getRefundInstructions: function () {
				var that = this;
				https_1.getContent2('REFUND').then(function (res) {
					if (res.code == 0) {
						var data = res.data;
						that.refundInstructions= data
					}
				});
			},

			//退款或不可退列表
			getRefundList: function (tab, type) {
				var that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
                that.loading=false
				https_1
					.refundList({
						page: that.page,
						pageSize: that.pageSize,
						refundType: tab
					})
					.then(function (res) {
						if (res.code == 0) {
							that.page= res.data.pageNo,
								that.pages=res.data.pages
							if (res.data.pageNo == res.data.pages) {
								that.LoadingComplete= true
							}

							var list = res.data.rechargeLists || [];
							uni.hideLoading();
							if (list.length == 0 && res.data.pageNo == 1) {
								that.rechargeLists= []
								return false;
							}

							if (type === 'replace') {
								that.rechargeLists= list
							} else {
								that.rechargeLists= that.rechargeLists.concat(list)
							}
                            that.loading=true
						}
					})
					['catch'](function () {
					uni.hideLoading();
				});
			},

			//获取未结算订单数
			getMyNotPayBillNumber: function () {
				var that = this;
				https_1.getMyNotPayBillNumber({
					prePayVer:1
				}).then(function (res) {
					if (res.code == 0) {
						that.unpaidOrderNum= res.data
					}
				});
			},

			//查询正在充电订单
			chargeInfos: function () {
				var that = this;
				https_1.pageChargeServiceMonitorNew({
					current: 1,
					pageSize: 100,
					memberNo: uni.getStorageSync('tel')
				}).then(function (res) {
					if (res.code == 0) {
						that.chargingOrderList= res.data.data
					}
				});
			},

			onCloseUnpaidOrder: function () {
				this.showUnpaidOrder=false
			},

			goPayOrder: function () {
				this.showUnpaidOrder=false
				uni.redirectTo({
					url: '/orderSub/pages/order/order?orderTypeIndex=3'
				});
			},

			onCloseCharging: function () {
				this.showCharging= false
			},

			//申请退款
			goGodaddy: function () {
				if (this.unpaidOrderNum > 0) {
					this.showUnpaidOrder= true
					return;
				}

				if (this.chargingOrderList.length > 0) {
					this.showCharging= true
					return;
				}

				uni.navigateTo({
					url: '../godaddy/godaddy'
				});
				this.tabIndex= 0,
					this.page= 1,
					this.pages= 1,
					this.rechargeLists= []
			},

			//退款记录
			goRefundRecord: function () {
				uni.navigateTo({
					url: '../refundRecord/refundRecord'
				});
				this.tabIndex= 0,
					this.page=1,
					this.pages= 1,
					this.rechargeLists= []
			},
			// 退款说明
			showExplainFun: function (e) {
				this.showExplain= true
        this.isFlag = e.currentTarget.dataset.flag
			},

			onCloseExplain: function () {
				this.showExplain= false
        if(this.isFlag){
        	this.goGodaddy();
        }
			},

			showCustomerFun: function () {
				this.$refs.alertDialog.open()
			},

			onCloseCustomer: function () {
				this.$refs.alertDialog.close()
			},

			//客服电话
			call: async function () {
                this.$refs.alertDialog.close()
				//#ifdef APP-PLUS
					let result = await this.$store.dispatch("requestPermissions",'CALL_PHONE')
					if (result !== 1){
						return
					}else{
						uni.makePhoneCall({
							phoneNumber: this.refundAmountInfo.customerTelephone
						});
					}    
				//#endif
				//#ifdef MP-WEIXIN
					uni.makePhoneCall({
						phoneNumber: this.refundAmountInfo.customerTelephone
					});
				//#endif
			},

			//选择金额类型
			checkTab: function (e) {
				var index = e.currentTarget.dataset.index;
				this.tabIndex= index,
					this.page= 1,
					this.pages= 1,
					this.rechargeLists= []
				this.getRefundList(index, '');
			}
		}
	};
</script>
<style lang="less">
    @import "../../../commin/commin.less";

    page {
        background-color: @text-color6;
    }

    .refundBox {
        .paddings(16rpx, 24rpx, 0rpx, 24rpx);

        .refundMoney {
            .paddings(56rpx, 32rpx, 40rpx, 32rpx);
            text-align: center;
            background: linear-gradient(0deg, @white-color, #F4F6F8);
            .borders(2rpx, @white-color);
            box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24);
            .borderradius(16rpx, 16rpx, 16rpx, 16rpx);

            .priceList{
                display: flex;
                justify-content: space-around;
                border-bottom: 1rpx solid #DCDFE6;
                padding-bottom: 32rpx;
                position: relative;
                .line{
                    position: absolute;
                    z-index: 1;
                    left: 46%;
                    top: 20rpx;
                    view{
                        width: 8rpx;
                        height: 8rpx;
                        background: #EEEEEE;
                        border-radius: 50%;
                        margin: 20rpx 0;
                    }
                    &:before{
                        content: '';
                        display: block;
                        width: 8rpx;
                        height: 8rpx;
                        background: #EEEEEE;
                        border-radius: 50%;
                    }
                    &:after{
                        content: '';
                        display: block;
                        width: 8rpx;
                        height: 8rpx;
                        background: #EEEEEE;
                        border-radius: 50%;
                    }
                }
            }

            .money {
                .fontsize(64rpx);
                font-family: DIN;
                font-weight: bold;
                color: @text-color1;
            }

            .describe {
                .fontsize(24rpx);
                font-family: PingFang SC;
                font-weight: 400;
                color: @text-color3;
            }
        }

        .operation {
            .tabList {
                display: flex;
                justify-content: space-between;
                .margins(0, 96rpx, 0, 96rpx);

                .tab {
                    .fontsize(34rpx);
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: @text-color4;

                    .img {
                        .kuangao(70rpx, 6rpx);
                        position: absolute;
                        margin-left: -94rpx;
                        margin-top: 54rpx;
                    }
                }

                .tab_sel {
                    color: @blue;
                }
            }
            .tabs{
                width: 90%;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                font-size: 34rpx;
                font-weight: bold;
                color: #18181A;
                margin-top: 40rpx;
                text{
                    &:last-of-type{
                        font-size: 28rpx;
                        color: #606266;
                    }
                }
            }
            .record{
                .margins(24rpx,0,180rpx,0);
                background: linear-gradient(0deg, @white-color, #F4F6F8);
                .borders(2rpx,@white-color);
                box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
                border-radius: 16rpx;
                .record_item{
                    .margins(40rpx,32rpx,0,32rpx);
                    padding-bottom: 40rpx;
                    border-bottom: 1rpx dashed #C0C4CC;
                    .itemDisplay{
                        display: flex;
                        justify-content: space-between;
                        .itemTitle{
                            display: flex;
                            align-items: center;
                            margin-bottom: 23rpx;
                            .name{
                                .kuan(350rpx);
                                overflow:hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                -o-text-overflow:ellipsis;
                                .fontsize(30rpx);
                                font-family: PingFang SC;
                                font-weight: bold;
                                color: @text-color1;
                            }
                            .tag{
                                margin-left: 16rpx;
                                .kuangao(118rpx,32rpx);
                                .lineheight(32rpx);
                                .borders(1rpx,@blue);
                                text-align: center;
                                background: rgba(20, 135, 250, 0.06);
                                border-radius: 16rpx;
                                .fontsize(22rpx);
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: @blue;
                            }
                        }
                        .changeAmount{
                            .fontsize(34rpx);
                            font-family: DIN;
                            font-weight: bold;
                            color: @text-color1;
                        }
                        .changeAmount1{
                            .fontsize(34rpx);
                            font-family: DIN;
                            font-weight: bold;
                            color: @orange;
                        }
                        .changeAmount2{
                            .fontsize(34rpx);
                            font-family: DIN;
                            font-weight: bold;
                            color: @orange;
                            margin-top: 26rpx;
                            right: 56rpx;
                            position: absolute;
                        }
                        .balance{
                            display: flex;
                            .fontsize(26rpx);
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: @text-color3;
                            .money{
                                color: @orange;
                            }
                        }
                        .time{
                            .fontsize(24rpx);
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: @text-color3;
                        }

                    }
                }
                .record_item:last-child { border-bottom: 0rpx;}
            }
        }

    }
    .fot_btn{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 32rpx;
        .btn,.btn1{
            .kuangao(180rpx,64rpx);
            .lineheight(64rpx);
            text-align: center;
            background: #fff;
            color: var(--textColor);
            border: 1px solid var(--textColor);
            border-radius: 44rpx;
            .fontsize(28rpx);
        }
        .btn1{
            color: #909399;
            border: 1px solid #909399;
            margin-left: 20rpx;
        }
    }
    //修复底部充值提示错乱问题;
    .doubt_view{
        width: 100%;
        height: 100rpx;
        line-height:100rpx;
        position: fixed;
        bottom: 0;
        text-align: center;
        background: linear-gradient(0deg, #fff, #F4F6F8);
        .doubt {
            .fontsize(24rpx);
            text-align: center;
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color4;
            text{
                color: #228FF5 ;
            }
        }
    }
    
    .explain1{
        text-align: center;
        .img{
            .kuangao(229rpx,222rpx);
        }
        .payNum{
            .fontsize(32rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color2;
            margin: 23rpx,0,23rpx,0
        }
        .payTit{
            .fontsize(26rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
        }
        .title{
            .fontsize(38rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color2;
            margin-bottom: 40rpx;
        }
        .txt{
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color1;
            .lineheight(48rpx);
        }
        .pupBtn{
            width: 100%;
            height: 108rpx;
            .lineheight(108rpx);
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            color: var(--textColor);
            .fontsize(30rpx);
            font-family: PingFang SC;
            border-top: 1rpx solid #DCDFE6;
        }

    }
    .explain{
        .title{
            .fontsize(38rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color2;
            margin-bottom: 40rpx;
        }
        .txt{
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color1;
            .lineheight(48rpx);
        }
        .pupBtn{
            width: 100%;
            height: 108rpx;
            .lineheight(108rpx);
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            color: var(--textColor);
            .fontsize(30rpx);
            font-family: PingFang SC;
            border-top: 1rpx solid #DCDFE6;
        }

    }
    .info{
        .fontsize(30rpx);
        .lineheight(70rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color1;
        text-align: center;
    }
    .customerBtn{
        display: flex;
        padding-top: 90rpx;
        padding-bottom: 10rpx;
        justify-content: space-between;
        .btn1{
            .kuangao(220rpx,88rpx);
            .lineheight(88rpx);
            .borders(2rpx,@text-color4);
            border-radius: 44rpx;
            text-align: center;
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color4;
        }
        .btn2{
            .kuangao(220rpx,88rpx);
            .lineheight(88rpx);
            background: linear-gradient(105deg, #2B99FF, #1B8CF5);
            box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
            border-radius: 44rpx;
            text-align: center;
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @white-color;
        }
    }
    .noList {
        text-align: center;
        font-size: 24rpx;
        color: #9699A6;
        padding: 24rpx;
    }

    .infoPopup{
        .fontsize(30rpx);
        .lineheight(70rpx);
        font-family: PingFang SC;
        color: @text-color1;
        display: block;
        font-size: 30rpx;
        .infoTitle{
            display: inline-block;
            width: 5em;
            text-align: right;
        }
        .infoValue{
            color: @blue;
        }
        }
</style>
